import React from "react";
import { Space, Table, Tooltip, } from "antd";
import { DeleteTwoTone, EditTwoTone } from '@ant-design/icons';

const getTableHeight = () => {
  const height = window.innerHeight;
  return height - 388;
}

const TableData = ({ 
  data, 
  handleDel, 
  handleEdit, 
}) => {
  const columns = [
    {
      title: "集合ID",
      dataIndex: "id",
      key: "id",
      width: 100,
    },
    {
      title: "集合名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
    },
    {
      title: "创建时间",
      dataIndex: "created_on",
      key: "created_on",
      render: (created_on) => created_on.slice(0, 10)
    },
    {
      title: "操作",
      key: "action",
      render: (_, row) => (
        <Space size="middle">
          <Tooltip title="编辑">
            <EditTwoTone onClick={() => handleEdit(row)}/>
          </Tooltip>
          <Tooltip title="删除">
            <DeleteTwoTone twoToneColor="#eb2f96" onClick={() => handleDel(row)} />
          </Tooltip>
        </Space>
      ),
    },
  ];
  return (
    <div className="data-set-table-data">
      <Table 
        scroll={{y: getTableHeight()}} 
        columns={columns} 
        dataSource={data} 
        pagination={false}
      />
    </div>
  )
};
export default TableData;
